<template>
  <div class="app-container">
    <div class="filter-container">
      <template v-for="qCol in listQueryCol">
        <el-input :key="qCol.key" v-if="qCol.type === 1" v-model="listQuery[qCol.key]" clearable class="filter-item" style="width: 200px;" :placeholder="qCol.mDesc"/>
      </template>
      <el-button v-permission="[`GET /admin/${modular}/list`]" class="filter-item" type="primary" icon="el-icon-search" @click="getList(true)">查找</el-button>
      <el-button v-permission="[`POST /admin/${modular}/create`]" class="filter-item" type="primary" icon="el-icon-edit" @click="handleUpdate(false)">添加</el-button>
    </div>
    <el-table v-loading="list == undefined" row-key="id" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row>
      <el-table-column v-if="isExeCol('id')" width="60" align="center" label="ID" prop="id" />
      <el-table-column v-for="item in attributes" show-overflow-tooltip v-if="isExeCol(item.name)" :prop="item.name" :label="item.text" align="center">
        <template slot-scope="scope">
          <template v-if="item.dictList !== undefined && item.dictList !== '' && item.dictList !== null && item.dictList.length > 0">
            <template v-for="dict in item.dictList" v-if="dict.val == scope.row[item.name]">{{ dict.name }}</template>
          </template>
          <template v-else-if="item.type === 21">
            <el-switch v-model="scope.row[item.name]" />
          </template>
          <template v-else-if="item.type === 16 || item.type === 17">
            <template v-if="scope.row[item.name] != undefined && scope.row[item.name].length > 0">
              <el-image style="width: 35px; height: 35px;margin:-10px 0;" fit="cover" :src="scope.row[item.name][0].url" :preview-src-list="scope.row[item.name].map(img => img.url)" />
            </template>
          </template>
          <template v-else-if="item.type === 13">
            <template v-if="scope.row[item.name] != undefined && scope.row[item.name].length > 0">
              <el-image style="width: 35px; height: 35px;margin:-10px 0;" fit="cover" :src="scope.row[item.name]" :preview-src-list="[scope.row[item.name]]" />
            </template>
          </template>
          <template v-else>
            {{ scope.row[item.name] }}
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip />
      <el-table-column align="center" label="操作" width="280" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button v-permission="[`POST /admin/${modular}/update`]" type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
          <el-button v-permission="[`POST /admin/${modular}/delete`]" type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    <el-dialog top="5vh" :title="dataForm && (dataForm.id ? '编辑' : '创建')" :visible.sync="isDiglog">
      <slot name="addForm" :data-form="dataForm" :cancel="cancel">
        <add-form v-if="isDiglog" :data-form="dataForm" :cancel="cancel" />
      </slot>
    </el-dialog>
  </div>
</template>

<style>
</style>

<script>
import { initBaseApi } from '@/utils/request'
let api
import AddForm from './add'
import Pagination from '@/components/Pagination'
export default {
  name: 'CommonModel',
  components: { Pagination, AddForm },
  data() {
    return {
      modular: 'model',
      dataForm: undefined,
      list: undefined,
      total: 50,
      attributes: undefined,
      isDiglog: false,
      listExeCol: undefined,
      listQueryCol: [],
      listQuery: {
        page: 1,
        limit: 20
      },
      checkId: undefined, // 选中id
      isDiglogCourse: false // 弹窗控制
    }
  },
  created() {
    const models = this.$route.path.split('/')
    this.modular = models[2]
    api = initBaseApi(models[1], models[2])
    try {
      const { listExeCol, listQueryCol } = require(`../rules/${models[1]}/${models[2]}/rule.js`)
      this.listExeCol = listExeCol
      this.listQueryCol = listQueryCol || []
    } catch (e) {
      console.log(e)
    }
    api.getAttributes().then(res => {
      this.attributes = res.data.data
    })
    this.getList()
  },
  methods: {
    isExeCol(col) {
      return this.listExeCol === undefined || this.listExeCol.indexOf(col) < 0
    },
    isStatus(val, row) {
      api.editStatus({ ids: row.id, status: val ? 0 : 1 }).then(res => {
        row.status = val ? 0 : 1
      })
    },
    cancel() {
      this.isDiglog = false
      this.getList(true)
    },
    getList(init = false) {
      if (init === true) {
        this.listQuery.page = 1
      }
      api.list(this.listQuery)
        .then(response => {
          this.list = response.data.data.records
          this.total = response.data.data.total
        })
    },
    handleUpdate(rowData) {
      if (rowData !== false) {
        this.dataForm = { ...rowData }
      } else {
        this.dataForm = {}
      }
      this.isDiglog = true
    },
    handleCourse(rowData) {
      this.checkId = rowData.id
      this.isDiglogCourse = true
    },
    handleDelete(row) {
      api.remove(row.id).then(res => {
        this.$notify.success({
          title: '成功',
          message: '删除成功'
        })
        const index = this.list.indexOf(row)
        this.list.splice(index, 1)
      })
    }
  }
}
</script>
